import React, { Component } from "react";
import { Button, Tooltip, Popover, Divider, message } from 'antd';
import {
	EnvironmentOutlined, DeploymentUnitOutlined, DotChartOutlined, BorderOutlined, CloudOutlined, UngroupOutlined,
	MinusOutlined, FireOutlined, BorderlessTableOutlined, DeleteOutlined, RiseOutlined, ClockCircleOutlined,
	SyncOutlined, Loading3QuartersOutlined
} from "@ant-design/icons"
import { MeasureCircle } from "./icon"
import Masspoint from "../../assets/icon/masspoint.svg"
import AddPoint, { AddCluster } from "./component";
import "./index.scss"
import olMap from "../../utils/olMap";


let lineDraw: any; //线
let PolygonDraw: any; //多边形
let circleDraw: any  //画圆
let BoxDraw: any   //矩形
let LineStringDraw: any;  //距离
let AreaDraw: any;      //面积
export default class FuncList extends Component {

	state = {
		pointVisiable: false, //添加特殊点
		clusterVisiable: false,//点聚合

	}

	componentDidMount(): void {
		setTimeout(() => {
			//兴尽晚回舟，误入藕花深处  争渡争渡  惊起一滩鸥鹭
			olMap.map.on("contextmenu", (event: any) => {
				event.preventDefault()   //屏蔽自带的右键事件
				// olMap.addMarkerToCluster()
				olMap.map.removeOverlay(olMap.measureTooltip)  //移除draw开始时创建的tool

				// var coordinate = olMap.map.getEventCoordinate(event.originalEvent);

				olMap.removeEvent("point")  //取消点位添加
				olMap.removeEvent("animationPoint")   //取消动态点添加

				lineDraw && olMap.map.removeInteraction(lineDraw)   //取消添加线段的方法
				PolygonDraw && olMap.map.removeInteraction(PolygonDraw)   //取消添加多边形的方法
				circleDraw && olMap.map.removeInteraction(circleDraw)   //取消添加圆的方法
				BoxDraw && olMap.map.removeInteraction(BoxDraw)  //取消添加矩形方法

				olMap.getEvent("drawClick") && olMap.removeEvent("drawClick")  //移除draw中的click
				LineStringDraw && olMap.map.removeInteraction(LineStringDraw)    //取消测距的方法
				AreaDraw && olMap.map.removeInteraction(AreaDraw)    //取消测面的方法

				// console.log(olMap.map.getOverlays().getArray());  //所有提示的集合
			})

			// olMap.map.getViewport().oncontextmenu = (event: any) => {
			//     event.preventDefault();
			//     let pixel = olMap.map.getEventPixel(event);
			//     // var coordinate = olMap.map.getEventCoordinate(event);
			//     console.log(event, pixel);
			// };
		});
	}

	//自定义点位
	changePointVisible = (pointVisiable: any) => {
		this.setState({
			pointVisiable: !pointVisiable
		})
	}

	//添加点聚合
	changeClusterVisiable = (clusterVisiable: any) => {
		this.setState({
			clusterVisiable: !clusterVisiable
		})
	}

	//添加点位
	addPoint = () => {
		message.success("请点击地图添加点位")
		olMap.addEvent("point", "singleclick", (e: any) => {
			const newLonLat = [e.coordinate[0].toFixed(4) * 1, e.coordinate[1].toFixed(4) * 1]
			olMap.addPoint(newLonLat[0], newLonLat[1])
		})
	}

	//添加圆
	addCircle = () => {
		olMap.addCircle()
		// message.success("点击地图确认圆心位置")
		// olMap.addEvent("point", "singleclick", (e: any) => {
		//     const newLonLat = [e.coordinate[0].toFixed(4) * 1, e.coordinate[1].toFixed(4) * 1]
		//     olMap.addPoint(newLonLat[0], newLonLat[1])
		// })
	}

	//添加海量点位图层
	addMasspoint = () => {
		const WebGLPointsLayer = olMap.addMassPoint()
		WebGLPointsLayer && message.success("海量点位添加已成功")
	}

	//添加动态点
	addAnimationPoint = () => {
		message.success("请点击地图添加动态点位")
		olMap.addEvent("animationPoint", "singleclick", (e: any) => {
			const newLonLat = [e.coordinate[0].toFixed(4) * 1, e.coordinate[1].toFixed(4) * 1]
			olMap.addAnimationPoint(newLonLat)
		})
	}

	//地图绘制操作
	addDraw = (type: any) => {
		switch (type) {
			case "LineString":
				message.success("请开始绘制线")
				lineDraw = olMap.addDrawCalss("LineString", "LineString")
				break;
			case "Polygon":
				message.success("请开始绘制面")
				PolygonDraw = olMap.addDrawCalss("Polygon", "Polygon")
				break;
			case "Circle":
				message.success("请开始绘制圆")
				circleDraw = olMap.addDrawCalss("Circle", "Circle")
				break;
		}
	}

	//绘制矩形
	addDrawBox = () => {
		message.success("开始绘制矩形")
		BoxDraw = olMap.addDrawSquare("Box")
	}

	//测距
	ranging = (type: any) => {
		if (type === "LineString") {
			LineStringDraw = olMap.addMeasureDistance(type)
		} else if (type === "Polygon") {
			AreaDraw = olMap.addMeasureDistance(type)
		}
	}

	//移除测距图层
	removeRanging = (type: any) => {
		switch (type) {
			case "LineString":
				olMap.layer.MeasureVector.getSource()?.clear()
				olMap.lineOverlayList.forEach((item: any) => olMap.map.removeOverlay(item));
				olMap.lineOverlayList = []
				message.success("移除成功")
				break;
			case "Polygon":
				olMap.layer.MeasureVector.getSource()?.clear()
				olMap.areaOverlayList.forEach((item: any) => olMap.map.removeOverlay(item));
				olMap.areaOverlayList = []
				message.success("移除成功")
				break;
		}
	}


	//移除图层操作
	removeLayers = (type: any) => {
		switch (type) {
			case "point":
				olMap.getLayer("point").getSource().getFeatures().length === 0 ? message.info("当前点位数量为0，请添加点位在进行移除") : message.success("移除成功")
				olMap.getLayer("point").getSource().clear()  //清空point图层中的点位===移除效果
				break;
			case "addCircle":
				olMap.getLayer("circle").getSource().getFeatures().length === 0 ? message.info("当前不存在矢量圆") : message.success("移除成功")
				olMap.getLayer("circle").getSource().clear()  //清空circle
				break;
			case "MassPoint":
				//清空海量点位图层
				olMap.getLayer("massPoint") ? message.success("移除成功") : message.info("当前不存在海量点")
				olMap.getLayer("massPoint") && olMap.map.removeLayer(olMap.getLayer("massPoint"))
				break;
			case "AnimationPoint":
				//清空动态点
				olMap.getLayer("animationPoint") ? message.success("移除成功") : message.info("当前不存在海量点")
				olMap.getLayer("animationPoint") && olMap.map.removeLayer(olMap.getLayer("animationPoint"))
				break;
			case "ClusterPoint":
				olMap.getLayer("clusterLayers") ? message.success("移除成功") : message.info("当前不存在点聚合图层")
				olMap.getLayer("clusterLayers") && olMap.map.removeLayer(olMap.getLayer("clusterLayers"))
				break;
			case "LineString":
				olMap.getLayer("LineString") ? message.success("移除成功") : message.info("当前不存在线")
				olMap.map.removeLayer(olMap.getLayer("LineString"))
				break;
			case "Polygon":
				olMap.getLayer("Polygon") ? message.success("移除成功") : message.info("当前不存在面")
				olMap.map.removeLayer(olMap.getLayer("Polygon"))
				break;
			case "Circle":
				olMap.getLayer("Circle") ? message.success("移除成功") : message.info("当前不存在圆")
				olMap.map.removeLayer(olMap.getLayer("Circle"))
				break;
			case "Box":
				olMap.getLayer("Box") ? message.success("移除成功") : message.info("当前不存在圆")
				olMap.map.removeLayer(olMap.getLayer("Box"))
				break;
		}
	}

	render() {
		const { pointVisiable, clusterVisiable } = this.state
		return <div className="funclist">
			<Popover
				placement="left"
				trigger="click"
				content={
					<>
						<Button type="primary" onClick={() => this.addPoint()} >普通点</Button>
						<Button type="primary" style={{ marginLeft: "5px" }} onClick={() => this.changePointVisible(pointVisiable)}>特殊点</Button>
					</>
				}
			>
				<Tooltip placement="left" title="添加点位"><EnvironmentOutlined className="icon" /></Tooltip>
			</Popover>
			<Tooltip placement="left" title="添加圆" ><Loading3QuartersOutlined className="icon" onClick={() => this.addCircle()} /></Tooltip>
			<Tooltip placement="left" title="点聚合" ><DeploymentUnitOutlined className="icon" onClick={() => this.changeClusterVisiable(clusterVisiable)} /></Tooltip>
			<Tooltip placement="left" title="海量点"><DotChartOutlined className="icon" onClick={this.addMasspoint} /></Tooltip>
			<Tooltip placement="left" title="动态扩散点"><FireOutlined className="icon" onClick={this.addAnimationPoint} /></Tooltip>
			<Tooltip placement="left" title="绘制线"><MinusOutlined className="icon" onClick={() => this.addDraw("LineString")} /></Tooltip>
			<Tooltip placement="left" title="绘制圆"><ClockCircleOutlined className="icon" onClick={() => { this.addDraw("Circle") }} /></Tooltip>
			<Tooltip placement="left" title="多边形"><UngroupOutlined className="icon" onClick={() => this.addDraw("Polygon")} /></Tooltip>
			<Tooltip placement="left" title="矩形"><BorderOutlined className="icon" onClick={() => this.addDrawBox()} /></Tooltip>
			<Tooltip placement="left" title="测距"><RiseOutlined className="icon" onClick={() => { this.ranging("LineString") }} /></Tooltip>
			<Tooltip placement="left" title="测量面积"><BorderlessTableOutlined className="icon" onClick={() => { this.ranging("Polygon") }} /></Tooltip>
			<Tooltip placement="left" title="测量圆"><MeasureCircle className="imgIcon" /></Tooltip>
			<Tooltip placement="left" title="覆盖物"><CloudOutlined className="icon" /></Tooltip>
			<Popover
				placement="left"
				// trigger="click"
				content={
					<>
						<Tooltip placement="top" title="移除点位"> <EnvironmentOutlined className="deleteIcon" style={{ marginLeft: "0px" }} onClick={() => this.removeLayers("point")} /></Tooltip>
						<Tooltip placement="top" title="移除圆"> <Loading3QuartersOutlined className="deleteIcon" onClick={() => this.removeLayers("addCircle")} /></Tooltip>
						<Tooltip placement="top" title="移除点聚合" ><DeploymentUnitOutlined className="deleteIcon" onClick={() => this.removeLayers("ClusterPoint")} /></Tooltip>
						<Tooltip placement="top" title="移除海量点"> <DotChartOutlined className="deleteIcon" onClick={() => this.removeLayers("MassPoint")} /></Tooltip>
						<Tooltip placement="top" title="移除动态点" > <FireOutlined className="deleteIcon" onClick={() => this.removeLayers("AnimationPoint")} /></Tooltip>
						<Tooltip placement="top" title="移除线"><MinusOutlined className="deleteIcon" onClick={() => this.removeLayers("LineString")} /></Tooltip>
						<Tooltip placement="top" title="移除圆"><ClockCircleOutlined className="deleteIcon" onClick={() => { this.removeLayers("Circle") }} /></Tooltip>
						<Tooltip placement="top" title="移除多边形"> <UngroupOutlined className="deleteIcon" onClick={() => this.removeLayers("Polygon")} /></Tooltip>
						<Tooltip placement="top" title="移除矩形"> <BorderOutlined className="deleteIcon" onClick={() => this.removeLayers("Box")} /></Tooltip>
						<Tooltip placement="top" title="移除测距"><RiseOutlined className="deleteIcon" onClick={() => { this.removeRanging("LineString") }} /></Tooltip>
						<Tooltip placement="top" title="取消测面"> <BorderlessTableOutlined className="deleteIcon" onClick={() => { this.removeRanging("Polygon") }} /></Tooltip>
						<Tooltip placement="top" title="取消测圆"><MeasureCircle delete className="imgIcon-delete" /></Tooltip>
						<Tooltip placement="top" title="移除覆盖物"><CloudOutlined className="deleteIcon" /></Tooltip>
					</>
				}
			>
				<Tooltip placement="left" title=""><DeleteOutlined className="delete" /></Tooltip>
			</Popover >
			{/* 自定义点位添加 */}
			{
				pointVisiable && <AddPoint
					pointVisiable={pointVisiable}
					changePointVisible={this.changePointVisible}
				/>
			}
			{/* 添加点聚合 */}
			{
				clusterVisiable && <AddCluster
					clusterVisiable={clusterVisiable}
					changeClusterVisiable={this.changeClusterVisiable}
				/>
			}
		</div >
	}
}
